<template>
  <div class="mv-video music-cpns-common" ref="videoRef">
    <div class="mv-left">
      <mv-detail :mvid="id" :isMv="isMv"></mv-detail>
      <zj-header
        :name="'评论(' + commentCount + ')'"
        :show="false"
        style="margin-top: 50px"
      ></zj-header>
      <mv-comment
        :songId="id"
        :commentType="isMv ? 'mv' : 'video'"
        ref="commentRef"
        @handleTop="handleTop"
      ></mv-comment>
    </div>
    <div class="mv-right">
      <zj-header
        name="Mv介绍"
        :show="false"
        style="margin-bottom: 8px"
      ></zj-header>
      <div style="display: flex; justify-content: space-between">
        <span style="font-size: 13px; color: #888"
          >发布时间:{{ $filters.formatTime(topMenu.publishTime) }}</span
        >
        <span style="font-size: 13px; color: #888"
          >播放次数:{{
            $filters.formatPlays(topMenu.playCount || topMenu.praisedCount)
          }}次</span
        >
      </div>
      <div style="margin-top: 8px">
        <span style="font-size: 13px; color: #888; line-height: 1.4">{{
          topMenu.desc || topMenu.description
        }}</span>
      </div>
      <zj-header
        name="相关推荐"
        :show="false"
        style="margin-top: 50px"
      ></zj-header>
      <mv-simi :mvid="id" :isMv="isMv"></mv-simi>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { InitDoing } from '../hook/mv-video'
import MvDetail from '../cpns/mv-detail.vue'
import MvComment from '@/base-ui/comment'
import ZjHeader from '@/base-ui/header'
import MvSimi from '../cpns/mv-simi.vue'

export default defineComponent({
  components: { MvDetail, MvComment, ZjHeader, MvSimi },
  setup() {
    const { id, commentRef, videoRef, handleTop, commentCount, topMenu, isMv } =
      InitDoing()
    return {
      id,
      commentRef,
      handleTop,
      videoRef,
      commentCount,
      topMenu,
      isMv
    }
  }
})
</script>

<style scoped lang="less">
.mv-video {
  width: 93%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-right: 40px;
  margin: 0 auto;
  .mv-left {
    width: 62%;
  }
  .mv-right {
    width: 32%;
  }
}
</style>
